<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>React | 时间领主的博客</title>
    <meta name="generator" content="VuePress 1.4.1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
    <link rel="icon" href="/blog/favicon.ico">
    <meta name="description" content="行动不一定带来快乐，而无行动则决无快乐">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="preload" href="/blog/assets/css/0.styles.174d23e9.css" as="style"><link rel="preload" href="/blog/assets/js/app.c6f0b635.js" as="script"><link rel="preload" href="/blog/assets/js/3.56d0db2f.js" as="script"><link rel="preload" href="/blog/assets/js/1.dc177a2a.js" as="script"><link rel="preload" href="/blog/assets/js/33.7070e81d.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.3ea1e65e.js"><link rel="prefetch" href="/blog/assets/js/11.b138a709.js"><link rel="prefetch" href="/blog/assets/js/12.98d3dec7.js"><link rel="prefetch" href="/blog/assets/js/13.1a8500fb.js"><link rel="prefetch" href="/blog/assets/js/14.d52be3d5.js"><link rel="prefetch" href="/blog/assets/js/15.e6ebcc21.js"><link rel="prefetch" href="/blog/assets/js/16.515c742f.js"><link rel="prefetch" href="/blog/assets/js/17.8ebf8e60.js"><link rel="prefetch" href="/blog/assets/js/18.b7c7c6f0.js"><link rel="prefetch" href="/blog/assets/js/19.0ccdcb93.js"><link rel="prefetch" href="/blog/assets/js/20.78e9f5a5.js"><link rel="prefetch" href="/blog/assets/js/21.5e84bd81.js"><link rel="prefetch" href="/blog/assets/js/22.eff4bf70.js"><link rel="prefetch" href="/blog/assets/js/23.1417d381.js"><link rel="prefetch" href="/blog/assets/js/24.013e4313.js"><link rel="prefetch" href="/blog/assets/js/25.f3067eb6.js"><link rel="prefetch" href="/blog/assets/js/26.19fe9c6d.js"><link rel="prefetch" href="/blog/assets/js/27.c089c5d4.js"><link rel="prefetch" href="/blog/assets/js/28.6ff3368c.js"><link rel="prefetch" href="/blog/assets/js/29.d1cc7d1f.js"><link rel="prefetch" href="/blog/assets/js/30.0dc56898.js"><link rel="prefetch" href="/blog/assets/js/31.b5bac1d5.js"><link rel="prefetch" href="/blog/assets/js/32.fbc30039.js"><link rel="prefetch" href="/blog/assets/js/34.e7c86927.js"><link rel="prefetch" href="/blog/assets/js/35.c731e557.js"><link rel="prefetch" href="/blog/assets/js/36.151c6972.js"><link rel="prefetch" href="/blog/assets/js/37.019d3b29.js"><link rel="prefetch" href="/blog/assets/js/4.6a4255d5.js"><link rel="prefetch" href="/blog/assets/js/5.829faed3.js"><link rel="prefetch" href="/blog/assets/js/6.b91d75cb.js"><link rel="prefetch" href="/blog/assets/js/7.7aafbc48.js"><link rel="prefetch" href="/blog/assets/js/8.982bf0b3.js"><link rel="prefetch" href="/blog/assets/js/9.283b0ce1.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.174d23e9.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div><div class="theme-container" data-v-4698c43e><div data-v-4698c43e><div id="loader-wrapper" class="loading-wrapper" data-v-4b73742e data-v-4698c43e data-v-4698c43e><div class="loader-main" data-v-4b73742e><div data-v-4b73742e></div><div data-v-4b73742e></div><div data-v-4b73742e></div><div data-v-4b73742e></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-6cbeab0a data-v-4698c43e data-v-4698c43e><h3 class="title" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a>时间领主的博客</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><input type="password" value="" data-v-6cbeab0a> <span data-v-6cbeab0a>Konck! Knock!</span> <button data-v-6cbeab0a>OK</button></label> <div class="footer" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><span data-v-6cbeab0a><i class="iconfont reco-theme" data-v-6cbeab0a></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-6cbeab0a>vuePress-theme-reco</a></span> <span data-v-6cbeab0a><i class="iconfont reco-copyright" data-v-6cbeab0a></i> <a data-v-6cbeab0a><span data-v-6cbeab0a>时间领主</span>
            
          <span data-v-6cbeab0a>2019 - </span>
          2020
        </a></span></div></div> <div class="hide" data-v-4698c43e><header class="navbar" data-v-4698c43e><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">时间领主的博客</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/前端/" class="nav-link"><i class="iconfont undefined"></i>
  前端
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/Light-UI 组件库/" class="nav-link"><i class="iconfont undefined"></i>
  Light-UI 组件库
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/数据库/" class="nav-link"><i class="iconfont undefined"></i>
  数据库
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/问题/" class="nav-link"><i class="iconfont undefined"></i>
  问题
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/面试/" class="nav-link"><i class="iconfont undefined"></i>
  面试
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="https://gitee.com/caohuiboss" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont undefined"></i>
  码云
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://cn.bing.com/" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont undefined"></i>
  必应
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-4698c43e></div> <aside class="sidebar" data-v-4698c43e><div class="personal-info-wrapper" data-v-6c8ffc9c><img src="/blog/avatar.gif" alt="author-avatar" class="personal-img" data-v-6c8ffc9c> <h3 class="name" data-v-6c8ffc9c>
    时间领主
  </h3> <div class="num" data-v-6c8ffc9c><div data-v-6c8ffc9c><h3 data-v-6c8ffc9c>26</h3> <h6 data-v-6c8ffc9c>文章</h6></div> <div data-v-6c8ffc9c><h3 data-v-6c8ffc9c>8</h3> <h6 data-v-6c8ffc9c>标签</h6></div></div> <hr data-v-6c8ffc9c></div> <nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/前端/" class="nav-link"><i class="iconfont undefined"></i>
  前端
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/Light-UI 组件库/" class="nav-link"><i class="iconfont undefined"></i>
  Light-UI 组件库
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/数据库/" class="nav-link"><i class="iconfont undefined"></i>
  数据库
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/问题/" class="nav-link"><i class="iconfont undefined"></i>
  问题
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/面试/" class="nav-link"><i class="iconfont undefined"></i>
  面试
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="https://gitee.com/caohuiboss" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont undefined"></i>
  码云
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://cn.bing.com/" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont undefined"></i>
  必应
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>React</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#react官方地址" class="sidebar-link">React官方地址</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#创建第一个react项目" class="sidebar-link">创建第一个React项目</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#它的基本结构" class="sidebar-link">它的基本结构</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#响应式设计和数据的绑定" class="sidebar-link">响应式设计和数据的绑定</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#在react中对数组的处理" class="sidebar-link">在React中对数组的处理</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#参数的传递" class="sidebar-link">参数的传递</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#jsx代码注释" class="sidebar-link">JSX代码注释</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#关于jsx中的html解析问题" class="sidebar-link">关于JSX中的html解析问题</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#父组件向子组件传值" class="sidebar-link">父组件向子组件传值</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#子组件向父组件传递数据" class="sidebar-link">子组件向父组件传递数据</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#子组件调用父组件方法" class="sidebar-link">子组件调用父组件方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#react高级-proptypes校验传递值" class="sidebar-link">React高级-PropTypes校验传递值</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#react高级-生命周期" class="sidebar-link">React高级-生命周期</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#npm-install-save-和-save-dev分不清" class="sidebar-link">npm install -save 和 -save-dev分不清</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/views/React/React%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9.html#axios请求数据" class="sidebar-link">axios请求数据</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-6cbeab0a data-v-4698c43e><h3 class="title" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a>React</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><input type="password" value="" data-v-6cbeab0a> <span data-v-6cbeab0a>Konck! Knock!</span> <button data-v-6cbeab0a>OK</button></label> <div class="footer" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><span data-v-6cbeab0a><i class="iconfont reco-theme" data-v-6cbeab0a></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-6cbeab0a>vuePress-theme-reco</a></span> <span data-v-6cbeab0a><i class="iconfont reco-copyright" data-v-6cbeab0a></i> <a data-v-6cbeab0a><span data-v-6cbeab0a>时间领主</span>
            
          <span data-v-6cbeab0a>2019 - </span>
          2020
        </a></span></div></div> <div data-v-4698c43e><main class="page"><!----> <div class="page-title" style="display:none;"><h1>React</h1> <hr> <div data-v-484a899e><i class="iconfont reco-account" data-v-484a899e><span data-v-484a899e>时间领主</span></i> <i class="iconfont reco-date" data-v-484a899e><span data-v-484a899e>2019-12-30</span></i> <!----> <i class="iconfont reco-tag tags" data-v-484a899e><span class="tag-item" data-v-484a899e>
      React
    </span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><h1 id="react"><a href="#react" class="header-anchor">#</a> React</h1> <p>总的来说，该篇文章用来记载我学习React的时候踩得坑，同时也为了以后碰到这些坑的时候，我可以及时的在我的文章中找到它,感谢 <a href="https://jspang.com/" target="_blank" rel="noopener noreferrer">技术胖<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 带我入门</p> <h2 id="react官方地址"><a href="#react官方地址" class="header-anchor">#</a> React官方地址</h2> <p>| <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">ReactJS官方地址<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> | <a href="https://github.com/facebook/react" target="_blank" rel="noopener noreferrer">GitHub地址<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> |</p> <h2 id="创建第一个react项目"><a href="#创建第一个react项目" class="header-anchor">#</a> 创建第一个React项目</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>// 安装reacr的脚手架
npm install -g create-react-app
create-react-app demo   
cd demo  
npm start  
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="它的基本结构"><a href="#它的基本结构" class="header-anchor">#</a> 它的基本结构</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>import React,{Component} from 'react'

class Hello extends Component{
    render(){
        return  (
            &lt;div&gt;
               Hello
            &lt;/div&gt;
        )
    }
}
export default Hello
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><blockquote><p>注意的几点</p></blockquote> <ol><li>组件文件需要大写字母开头，且return中得有一个父容器包裹。</li> <li>如果不需要父容器div，可以用 Fragment （需要事先引入）标签包裹。</li></ol> <h2 id="响应式设计和数据的绑定"><a href="#响应式设计和数据的绑定" class="header-anchor">#</a> 响应式设计和数据的绑定</h2> <blockquote><p>数据的定义 构造函数里 constructor 中定义</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state= {
        inputValue:' ' , // input中的值
        list:[]    //数组列表
    }
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><p>数据的绑定 一旦input，textarea这种标签绑定数据，一定要绑定一个事件，因为在控制台会报错的</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;input value={this.state.inputValue} /&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>绑定事件 可以通过绑定事件进行赋值但是需要注意的是</p></blockquote> <ol><li>绑定事件的时候需要用bind设置this的指向。</li> <li>React中改变值需要使用this.setState方法</li></ol> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;input value={this.state.inputValue} onChange={this.inputChange.bind(this)} /&gt;

 // 在render()方法的下面建立一个inputChange()方法
inputChange(e){
    this.setState({
        inputValue:e.target.value
    })
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="在react中对数组的处理"><a href="#在react中对数组的处理" class="header-anchor">#</a> 在React中对数组的处理</h2> <blockquote><p>需要注意的几点</p></blockquote> <ol><li>在rander函数中 一旦需要进行数据处理的话需要在 { } 进行。</li> <li>循环数组的时候不要忘了加上key值，千万别重复。</li></ol> <div class="language- line-numbers-mode"><pre class="language-text"><code>constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:&quot;&quot;,
        list:['你好','世界']  
    }
}

render(){
    return  (
        &lt;Fragment&gt;
            &lt;div&gt;
                &lt;input value={this.state.inputValue} onChange={this.inputChange.bind(this)} /&gt;
                &lt;button&gt; 增加字段 &lt;/button&gt;
            &lt;/div&gt;
            &lt;ul&gt;
                {
                    this.state.list.map((item,index)=&gt;{
                        return &lt;li key={index+item}&gt;{item}&lt;/li&gt;
                    })
                }
            &lt;/ul&gt;  
        &lt;/Fragment&gt;
    )
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="参数的传递"><a href="#参数的传递" class="header-anchor">#</a> 参数的传递</h2> <blockquote><p>事件绑定 bind之后第二个参数以后就可以传递参数了</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;ul&gt;
    {
        this.state.list.map((item,index)=&gt;{
            return (
                &lt;li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                &gt;
                    {item}
                &lt;/li&gt;
            )
        })
    }
&lt;/ul&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="jsx代码注释"><a href="#jsx代码注释" class="header-anchor">#</a> JSX代码注释</h2> <blockquote><p>使用VSCode的快捷键，直接按Ctrl+/，就会自动生成正确的注释</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>// 这个是错误的注释方法

{/* 正确注释的写法 */}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="关于jsx中的html解析问题"><a href="#关于jsx中的html解析问题" class="header-anchor">#</a> 关于JSX中的html解析问题</h2> <ul><li>class换成className，它是防止和js中的class类名 冲突，所以要求换掉。</li> <li>for换成htmlFor，它是防止和js中的for冲突，所以要求换掉。</li></ul> <h2 id="父组件向子组件传值"><a href="#父组件向子组件传值" class="header-anchor">#</a> 父组件向子组件传值</h2> <blockquote><p>父组件中使用子组件的时候通过属性传值</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>// 父组件
&lt;ComponentChild content={&quot;我是值&quot;} /&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p>子组件中通过 this.pops.xxx 的形式来接收</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>import React, { Component } from 'react'; 
class ComponentChild  extends Component { 
   
    render() { 
        return ( 
            &lt;div&gt;{this.props.content}&lt;/div&gt;
         );
    }
}
 
export default ComponentChild;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="子组件向父组件传递数据"><a href="#子组件向父组件传递数据" class="header-anchor">#</a> 子组件向父组件传递数据</h2> <blockquote><p>通过调用父组件的方法来传值</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>// 父组件 App.js
&lt;ComponentChild content={&quot;我是值&quot;} /&gt;

// 父组件的方法
handleClick(){
    console.log(1433223)
}

// 子组件ComponentChild.js
render() {
      return (
            &lt;span onClick={this.handleClick.bind(this)}&gt;
            &lt;/span&gt;
     );
}
handleClick = (e) =&gt; {
       this.props.handleClick()
}

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><blockquote><p><strong>在构造函数中绑定 this</strong></p></blockquote> <ul><li>构造函数中绑定性能会高一些，特别是在高级组件开发中，据说会有很大的作用，毕竟我才刚学</li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
}
render() { 
       return ( 
           &lt;div onClick={this.handleClick}&gt;
               {this.props.content}
           &lt;/div&gt;
      );
 }
handleClick(){
      console.log(this.props.index)
 }
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="子组件调用父组件方法"><a href="#子组件调用父组件方法" class="header-anchor">#</a> 子组件调用父组件方法</h2> <blockquote><p>如果子组件要调用父组件方法，其实和传递数据差不多，只要在组件调用时，把方法传递给子组件就可以了,记得这里也要进行this的绑定，如果不绑定子组件是没办法找到这个父组件的方法的。</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>// App.js
&lt;ul&gt;
    {
        this.state.list.map((item,index)=&gt;{
            return (
                &lt;ComponentChild 
                key={index+item}  
                content={item}
                index={index}
                handleClick={this.handleClick.bind(this)}
                /&gt;
            )
        })
    }
&lt;/ul&gt;  

// ComponentChild.js
handleClick(){
    this.props.handleClick(this.props.index)
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="react高级-proptypes校验传递值"><a href="#react高级-proptypes校验传递值" class="header-anchor">#</a> React高级-PropTypes校验传递值</h2> <blockquote><p>ComponentChild.js组件里传递了4个值，有字符串，有数字，有方法，这些都是可以使用PropTypes限制的。在使用需要先引入PropTypes。</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>import PropTypes from 'prop-types'
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>引入后，就可以在组件的下方进行引用了，需要注意的是子组件的最下面（<strong>不是类里边</strong>），写入下面的代码：</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>ComponentChild.propTypes={
    content:PropTypes.string,
    handleClick:PropTypes.func,
    index:PropTypes.number
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>必传值的校验 <strong>isRequired</strong></li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>avname:PropTypes.string.isRequired
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>默认值 <strong>defaultProps</strong></li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>ComponentChild.defaultProps = {
    avname:'虾米'
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="react高级-生命周期"><a href="#react高级-生命周期" class="header-anchor">#</a> React高级-生命周期</h2> <p><img src="https://jspang.com/images/React1901.png" alt="生命周期"></p> <blockquote><p>由图可知 React 声明周期的四个大阶段</p></blockquote> <ol><li>Initialization:初始化阶段</li> <li>Mounting: 挂在阶段</li> <li>Updation: 更新阶段</li> <li>Unmounting: 销毁阶段</li></ol> <p><strong>直接上代码</strong></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>import React, { Component, Fragment } from 'react';
class Life extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillMount() {
        // 1模板渲染前
        console.log(&quot;componentWillMount : 在组件即将被挂载到页面的时刻执行&quot;)
    }

    componentDidMount() {
        // 3模板渲染后
        console.log('componentDidMount----组件挂载完成的时刻执行')
    }
    render() {
        // 2模板渲染中
        return (
            &lt;Fragment&gt;

            &lt;/Fragment&gt;
        );
    }

    // componentWillMount----组件将要挂载到页面的时刻执行
    // render----开始挂载渲染
    // componentDidMount----组件挂载完成的时刻执行

    shouldComponentUpdate(nextProps,nextState) {
        // nextProps:变化后的属性;
        // nextState:变化后的状态;
        // 判断模块需不需要渲染
        // 它要求返回一个布尔类型的结果，必须有返回值，这里就直接返回一个true了
        console.log('shouldComponentUpdate---组件发生改变前执行')

        // if (nextProps.content !== this.props.content) {
        //     return true
        // } else {
        //     return false
        // }
        return true
    }

    //shouldComponentUpdate 返回true才会被执行。
    componentWillUpdate() {
        // 如果需要渲染就执行该方法
        console.log('componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
    }

    componentDidUpdate() {
        // 模块渲染结束
        console.log('componentDidUpdate----组件更新之后执行')
    }

    // 1-shouldComponentUpdate---组件发生改变前执行
    // 2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行
    // 3-render----开始挂载渲染
    // 4-componentDidUpdate----组件更新之后执行

    componentWillReceiveProps() {
        // 模块将接受新的数据
        console.log('componentWillReceiveProps')
    }

    //当组件从页面中删除的时候执行
    componentWillUnmount() {
        console.log('child - componentWillUnmount')
    }
}

export default Life;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br></div></div><h2 id="npm-install-save-和-save-dev分不清"><a href="#npm-install-save-和-save-dev分不清" class="header-anchor">#</a> npm install -save 和 -save-dev分不清</h2> <ul><li>npm install xxx: 安装项目到项目目录下，不会将模块依赖写入devDependencies或dependencies。</li> <li>npm install -g xxx: -g的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm cinfig prefix的位置。</li> <li>npm install -save xxx：-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。</li> <li>npm install -save-dev xxx：-save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。</li></ul> <h2 id="axios请求数据"><a href="#axios请求数据" class="header-anchor">#</a> axios请求数据</h2> <blockquote><p>可以在componentDidMount生命周期函数里请求 因为在render里执行，会出现很多问题，比如一直循环渲染。</p></blockquote> <div class="language- line-numbers-mode"><pre class="language-text"><code>componentDidMount() {
        axios
            .get('https://api.douban.com/v2/movie/in_theaters?city=广州&amp;start=0&amp;count=10')
            .then(res =&gt; {
                console.log(res)
            })
            .catch(err =&gt; {
                console.log(err)
            })
}

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></div> <footer class="page-edit" style="display:none;"><!----> <div class="last-updated"><span class="prefix">最后更新时间: </span> <span class="time">3/14/2020, 12:18:54 PM</span></div></footer> <!----> <!----></main> <!----> <div class="comments-wrapper" data-v-4698c43e><!----></div></div></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-a81d141e data-v-a81d141e><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-a81d141e><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-a81d141e></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-a81d141e></path></svg></div></div></div>
    <script src="/blog/assets/js/app.c6f0b635.js" defer></script><script src="/blog/assets/js/3.56d0db2f.js" defer></script><script src="/blog/assets/js/1.dc177a2a.js" defer></script><script src="/blog/assets/js/33.7070e81d.js" defer></script>
  </body>
</html>
